<script setup>
  import screenfull from 'screenfull'
  import { ref, reactive, watch, onMounted, watchEffect } from 'vue'
  import Echart from './echart.vue'

  const props = defineProps({
    title: '',
    path: '',
    chartType: '',
    chartData: {},
    filterText: '',
    filterId: '',
    filterList: [],
    isShowUnit: true,
    isShowFilterIcon: null,
    isShowFullIcon: null
  })

  const emit = defineEmits(['clickChart', 'filterChartData'])

  const isFullscreen = ref(false)
  const showFilterBox = ref(false)
  const filterVal = ref(null)

  watch(() => props.filterId, 
    (newVal, oldVal) => {
      filterVal.value = newVal
    },
    {
      immediate: true
    }
  )

  // 全屏
  function fullScreen() {
    // const element = document.getElementById('Echart');//指定全屏区域元素

    let element = this.$refs.Echart
    // 先使用screenfull.enabled方法判断是否支持screenfull

    // 如果不允许进入全屏，发出不允许提示 浏览器不能全屏
    if (!screenfull.isEnabled) {
      this.$message({
        message:'浏览器不能全屏，安装其他版本试试',
        type:'warning'
      })

      return false
    }
    
    isFullscreen.value = isFullscreen.value
    
    screenfull.request(element)

    // 调用 screenfull.toggle() 可以双向切换全屏与非全屏
    screenfull.toggle()
  }

  // 点击 图标
  function handleClickChart(val) {
    emit('clickChart', val)
  }

  // 筛选
  function handlefilter(item) {
    showFilterBox.value = false
    emit('filterChartData', item)
  }
</script>

<template>
  <div class="full" id="Echart" ref="Echart">
    <div class="full relative">
      <!-- 筛选 -->
      <div class="w_50_p flex_row_end absolute top_0 right_5 z_999"> 
        <div class="w_25 h_25 mr_10" v-if="isShowFilterIcon">
          <img class="full cursor" src="~@/assets/images/icon/filter.png" alt="" @click="showFilterBox = true">
        </div>

        <!-- 全屏 -->
        <div class="w_25 h_25" v-if="isShowFullIcon">
          <img 
            class="full cursor" 
            v-if="isFullscreen" 
            src="~@/assets/images/icon/qu-xiao-quan-ping.png" 
            alt="" 
            @click="fullScreen()"
          >

          <img class="full cursor" v-if="!isFullscreen" src="~@/assets/images/icon/quan-ping.png" alt="" @click="fullScreen()">
        </div>
      </div>

      <echart 
        :title="title" 
        :path="path" 
        :chartType="chartType" 
        :chartData="chartData" 
        :isShowUnit="isShowUnit"
        @emitChartParams="handleClickChart" 
      />

      <!-- 筛选区 -->
      <div 
        class="full absolute top_0 right_0" 
        v-show="showFilterBox"
        @click="showFilterBox = false"
      >
        <div class="w_40_p h_full absolute top_0 right_0 p_10 bgc_f6f6f6 z_999">
          <div class="w_full flex_row_between">
            <div class="w_85_p">
              <el-select 
                class="w_full_i" 
                v-model="filterVal" 
                size="small" 
                :placeholder="filterText" 
                clearable filterable
              >
                <el-option
                  v-for="(item, index) in filterList" :key="index"
                  :label="item.name"
                  :value="item.id"
                  @click.native="handlefilter(item)"
                >
                </el-option>
              </el-select>
            </div>

            <div class="w_15_p relative color_fff fw_bold cursor" @click="showFilterBox = false">
              <div class="w_20 h_20 absolute top_0 right_0">
                <img class="full cursor" src="~@/assets/images/icon/cancel.png" alt="">
              </div>
            </div>
          </div>
          
        </div>
      </div>
  </div>
  </div>
</template>

<style>
  #Echart:-webkit-full-screen {
    padding: 50px;
    /* background-color: #001531 !important; */
    background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
  }
  #Echart:-moz-full-screen {
    padding: 50px;
    /* background-color: #001531 !important; */
    background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
  }
  #Echart:-ms-fullscreen {
    padding: 50px;
    /* background-color: #001531 !important; */
    background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
  }
  #Echart:fullscreen{
    padding: 50px;
    /* background-color: #001531 !important; */
    background: linear-gradient(to right, #5897eaa1, #2e6fac6f, #5897eaa1);
  }
</style>